<template>
  <div class="tiktok-order">
    <c-title text="电商CPS"></c-title>
    <van-tabs v-model="active" @click="onClick" ref="tabs">
      <van-tab title="全部" name="-2"></van-tab>
      <van-tab title="待结算" name="0"></van-tab>
      <van-tab title="已结算" name="1"></van-tab>
      <van-tab title="已失效" name="-1"></van-tab>
    </van-tabs>
    <div class="box" v-if="list && list.length !== 0">
      <div class="item" v-for="(item, i) in list" :key="i">
        <div class="title">
          <div class="flex">
            <span>订单号：{{ item.order_id }}</span>
            <span style="width: 1rem; height: 1rem; margin-left: 0.5rem;" v-clipboard:copy="item.order_id"
              v-clipboard:success="onCopy">
              <img src="../../../assets/images/TikTok/copy.png" width="100%" height="100%" />
            </span>
          </div>
          <div class="status"
            :class="{ finish: item.flow_point == 1, wating: item.flow_point == 0, 'lose-efficacy': item.flow_point == -1 }">
            {{
                orderStatus(item.flow_point)
            }}</div>
        </div>
        <div class="content">
          <div style="width: 6.5rem; height: 6.0938rem; border-radius: 0.25rem; overflow: hidden; margin-right: 0.5rem;">
            <img width="100%" height="100%" :src="item.cover" alt="" />
          </div>
          <div class="content-right">
            <div class="content-title">
              <span  :class="item.aggregate_module_code==1?'tiktok':'cps'">{{ item.aggregate_module_code==1?'抖音':item.aggregate_module_code == 2 ? '淘宝' :
              item.aggregate_module_code == 3 ? '京东' : item.aggregate_module_code == 4 ? '拼多多' : '唯品会' }}</span>
              <span>{{ item.product_name }}</span>
            </div>
            <div class="detail">
              <div>
                <span class="c-999">付款时间:</span>
                <span class="ml-10">{{ item.pay_success_time }}</span>
              </div>
              <div class="close_an_account">
                <span class="c-999">结算时间:</span>
                <span class="ml-10">{{ item.settle_time }}</span>
              </div>
              <div class="pay_money">
                <span class="c-999">支付金额:</span>
                <span class="c-ff6238 ml-10">{{ $i18n.t('money') }}{{ item.total_pay_amount }}</span>
              </div>
              <div class="c-ff6238">下单返{{ item.order_reward }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { scrollMixin } from "../../../utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      list: [],
      active: '-2',

      status: "",
      current_page: 1,
      last_page: 1,
      isLoadMore: true,

      integral: window.localStorage.integral || "积分",
    };
  },
  activated() {
    this.isLoadMore = true;
    let json = { page: 1 }

    if (this.$route.query.status !== 'undefined') {
      let _status = this.$route.query.status.toString() ;
      this.active = _status;
      json.status = _status;
    }
    this.getData(json);
  },
  methods: {
    onCopy() {
      this.$toast("复制成功");
    },
    orderStatus(number) {
      if (number == 0) {
        return "待结算";
      } else if (number == 1) {
        return "已结算";
      } else {
        return "已失效";
      }
    },
    onClick() {
      let status = this.active;
      this.status = status;
      this.getData({ status, page: 1 });
    },
    async getData(json) {
      let { msg, result, data } = await $http.get("plugin.tiktok-cps.api.order.order-list", json);
      if (result == 0) {
        return this.$toast(msg);
      }
      if (json.page == 1) {
        this.list = data.list || [];
      } else if (json.page > 1) {
        this.list = this.list.concat(data.list || []);
      }
      this.current_page = data.current_page;
      this.last_page = data.last_page;
      this.isLoadMore = true;
    },
    getMoreData() {
      if (this.current_page >= this.last_page) {
        return;
      }
      this.isLoadMore = false;
      let page = this.current_page + 1;
      this.getData({ page: page, status: this.status });
    }
  }
};
</script>

<style scoped lang="scss">
.tiktok-order {
  .tiktok {
    background-color: #000;
  }

  .cps,.tiktok{
    color: #fff;
    border-radius: 0.3125rem;
    padding: 0.0938rem 0.25rem;
    font-size: 0.75rem;
    margin-right: 0.1875rem;
  }
  .cps{
   background-color: #F15353;
  }
  .content-right {
    overflow: hidden;
    flex: 1;
  }

  .content {
    display: flex;
    margin-top: 0.9063rem;
  }

  .c-999 {
    color: #999;
  }

  .ml-10 {
    margin-left: 0.3125rem;
  }

  .wating {
    background: rgba(255, 98, 56, 0.1);
    color: #ff6238;
  }

  .fz24 {
    font-size: 0.75rem;
  }

  .c-ff6238 {
    color: #ff6238;
  }

  .pay_money {
    margin-bottom: 0.5938rem;
  }

  .close_an_account {
    margin-top: 0.5rem;
    margin-bottom: 0.625rem;
  }

  .detail {
    text-align: left;
    font-size: 0.75rem;
    margin-top: 0.8438rem;
  }

  .flex {
    display: flex;
  }

  .content-title {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .status {
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
  }

  .finish {
    background: rgba(246, 246, 246, 0.39);
  }

  .lose-efficacy {
    background: rgba(246, 246, 246, 0.39);
    color: #999;
  }

  .item {
    margin: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.75rem;
  }
}
</style>
